<template>
  <div class="editmobileCell">
    <div class="head">
      <i class="iconfont icon-member-left f-16" @click="$router.go(-1)"></i>
      <span class="name t-l f-bold">绑定手机</span>
    </div>
    <van-cell-group :border="false">
      <van-cell v-if="country_code == 1" :required="true" is-link @click="openPopUp = true">
        <template #title>
          <div style="text-align: left;">{{ $i18n.t("base.countryCode") }}</div>
        </template>
        <template #default>
          <span>+{{ form.country }}</span>
        </template>
      </van-cell>
      <van-field v-if="imgcode" required v-model.trim="form.captcha" :placeholder="$i18n.t('base.enterCaptcha')" center clearable>
        <template #button>
          <img slot="button" style="width: 6.25rem; height: 1.875rem; z-index: 999;" :src="imgcode" @click="getimgdata" />
        </template>
        <template #left-icon>
          <div class="flex-a-c iconBox">
            <img src="../assets/images/ht_bg_bgimg.png" style="width: 1rem; height: 0.875rem;" />
            <i class="iconfont icon-advertise-next"></i>
          </div>
        </template>
      </van-field>
      <template v-if="!mobile_check_type">
        <van-field required v-model.trim="form.mobile" :placeholder="$i18n.t('base.enterPhoneNumber')" center clearable>
          <template #left-icon>
            <div class="flex-a-c iconBox">
              <img src="../assets/images/loginPhone.png" style="width: 0.719rem; height: 1.063rem;" />
              <i class="iconfont icon-advertise-next"></i>
            </div>
          </template>
        </van-field>
        <van-field required v-model.trim="form.code" :placeholder="$i18n.t('base.enterVerificationCode')" maxlength="4" type="number" center clearable>
          <template #left-icon>
            <div class="flex-a-c iconBox" style="width: 3rem;justify-content: space-between;">
              <img src="../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
              <i class="iconfont icon-advertise-next"></i>
            </div>
          </template>
          <template #button>
            <div style="font-size: 12px;" :style="'color:' + 'var(--themeBaseColor)'" @click="verificationCode">{{ btnText }}</div>
          </template>
        </van-field>
      </template>
      <van-field v-if="invite" :required="isrequired" v-model.trim="form.invite_code" :placeholder="$i18n.t('base.enterInviteCode')" center clearable>
        <template #button>
          <span style="color: #ff2c29; white-space: nowrap;font-size: 12px;" @click="fillInCode">{{ $i18n.t("base.defaultInviteCode") }}</span>
        </template>
      </van-field>
      <template v-if="is_password == '1'">
        <van-field required v-model.trim="form.password" :type="setpassword" :placeholder="$i18n.t('base.setPassword')" center clearable>
          <template slot="right-icon">
            <i class="iconfont icon-onlineCar_f" style="font-size: 24px;" @click.stop="SetPwdClick()" v-if="!visibleSet"></i>
            <i class="iconfont icon-onlineCar_g" style="font-size: 24px;" @click.stop="SetPwdClick()" v-if="visibleSet"></i>
          </template>
        </van-field>
        <van-field required v-model.trim="form.confirm_password" :type="surepassword" :placeholder="$i18n.t('base.confirmPassword')" center clearable>
          <template slot="right-icon">
            <i class="iconfont icon-onlineCar_f" style="font-size: 24px;" @click.stop="surePwdClick()" v-if="!visibleSure"></i>
            <i class="iconfont icon-onlineCar_g" style="font-size: 24px;" @click.stop="surePwdClick()" v-if="visibleSure"></i>
          </template>
        </van-field>
      </template>
    </van-cell-group>
    <countryCode :openPopUp.sync="openPopUp" :optValue.sync="form.country"></countryCode>
  </div>
</template>
<script>
import countryCode from "@/components/countryCode.vue";
export default {
  props: ["isrequired","country_code", "setpassword", "is_password", "form", "imgcode", "btnText", "btnBg", "mobile_check_type", "invite", "default_invite", "visibleSet", "visibleSure"],
  data() {
    return {
      openPopUp: false
    };
  },
  components: { countryCode },
  activated() {},
  methods: {
    verificationCode() {
      this.$emit("verificationCode");
    },
    fillInCode() {
      this.$emit("fillInCode");
    },
    SetPwdClick() {
      this.$emit("SetPwdClick");
    },
    surePwdClick() {
      this.$emit("surePwdClick");
    },
    getimgdata() {
      this.$emit("getimgdata");
    }
  }
};
</script>
<style lang="scss" scoped>
.editmobileCell {
  padding: 0 1.25rem;
  padding-top: 1rem;
  box-sizing: border-box;
  .head {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    .iconfont {
      font-size: 20px;
      font-weight: 600;
    }
    .name {
      font-size: 1.5rem;
      margin-left: 10px;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  .iconBox {
    width: 3rem;
    justify-content: space-between;
    img {
      margin: 0;
    }
  }
}
</style>
